<template>
  <div class="mod-config">

      <div class="avue-crud">
        <el-form label-width="140px">
        <el-divider>查询条件</el-divider>
        <el-row>
          <el-col :span="6">
            <el-form-item label="配镜单号" prop="billId">
              <el-input v-model="dataForm.billId" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="配镜部门" prop="deptName" >
              <el-input v-model="dataForm.deptName" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="取镜部门" prop="takeMirroDeptName" >
              <el-input v-model="dataForm.takeMirroDeptName" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="顾客姓名" prop="name">
              <el-input v-model="dataForm.name" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="关联顾客卡" prop="customerCard">
              <el-input  v-model="dataForm.customerCard" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话" prop="phone1">
              <el-input v-model="dataForm.phone1" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预计取镜时间" prop="takeMirroTime" >
              <el-input v-model="dataForm.takeMirroTime" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="实际取镜时间" prop="actulTakeMirroTime" >
              <el-input v-model="dataForm.actulTakeMirroTime" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="收银日期" prop="payTime">
              <el-input  v-model="dataForm.payTime" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="实际收银日期" prop="payTime">
              <el-input  v-model="dataForm.payTime" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="退款状态" prop="refundFlag">
              <el-input  v-model="dataForm.refundFlag" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="实际退款时间" prop="refundTime">
              <el-input  v-model="dataForm.refundTime" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        </el-form>
        <el-divider>查询信息</el-divider>

        <el-row v-if="consigns.length > 0" :gutter="10">
          <el-col :span="12">
            <el-table :data="dataList" border v-loading="dataListLoading">
              <el-table-column prop="status" label="完成状态" :formatter="statusFormatter"></el-table-column>
              <el-table-column prop="inTransitName" label="在途名称" width="230">
                <template slot-scope="scope">
                  <div v-if="scope.row.inTransitId == '4'">
                    <span>{{scope.row.inTransitName}}</span>
                    <span>[<el-button type="text" @click="checkDetail(scope.row.operateBillId)">{{scope.row.operateBillId}}</el-button>]</span>
                  </div>
                  <div v-else-if="scope.row.inTransitId == '5'">
                    <span>{{scope.row.inTransitName}}</span>
                    <span>[<el-button type="text" @click="checkReceiptDetail(scope.row.operateBillId)">{{scope.row.operateBillId}}</el-button>]</span>
                  </div>
                  <div v-else>{{scope.row.inTransitName}}</div>
                </template>
              </el-table-column>
              <el-table-column  prop="operationTime" label="操作时间" width="180"></el-table-column>
              <el-table-column prop="operationUsername" label="操作人"></el-table-column>
              <el-table-column prop="deliveryUsername" label="配送人"></el-table-column>
            </el-table>
          </el-col>
          <el-col :span="12">
            <el-table :data="consigns" border>
              <el-table-column label="重订过程">
                <el-table-column>
                  <template slot="header" slot-scope="scope">
                    <span> 重订单号：{{consigns[0].rebillId}}</span>
                  </template>
                  <el-table-column type="index" :index="indexMethod" label="顺序" width="50"></el-table-column>
                  <el-table-column prop="consignStatus" label="在途状态">
                    <template slot-scope="scope">
                      <span v-if="scope.row.consignStatus == '1'">已生成重订单</span>
                      <span v-if="scope.row.consignStatus == '2'">已收货重订单</span>
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column>
                  <template slot="header" slot-scope="scope">
                    <span> 委外订单号：{{consigns[0].billId}}</span>
                  </template>
                  <el-table-column prop="createTime" label="操作时间"></el-table-column>
                  <el-table-column prop="createUserName" label="操作人" width="80"></el-table-column>
                  <el-table-column prop="memo" label="备注" width="80"></el-table-column>
                </el-table-column>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row v-else>
          <el-table :data="dataList" border v-loading="dataListLoading">
            <el-table-column prop="status" label="完成状态" :formatter="statusFormatter"></el-table-column>
            <el-table-column prop="inTransitName" label="在途名称" width="210">
              <template slot-scope="scope">
                <div v-if="scope.row.inTransitId == '4'">
                  <span>{{scope.row.inTransitName}}</span>
                  <span>[<el-button type="text" @click="checkDetail(scope.row.operateBillId)">{{scope.row.operateBillId}}</el-button>]</span>
                </div>
                <div v-else-if="scope.row.inTransitId == '5'">
                  <span>{{scope.row.inTransitName}}</span>
                  <span>[<el-button type="text" @click="checkReceiptDetail(scope.row.operateBillId)">{{scope.row.operateBillId}}</el-button>]</span>
                </div>
                <div v-else>{{scope.row.inTransitName}}</div>
              </template>
            </el-table-column>
            <el-table-column  prop="operationTime" label="操作时间" width="180"></el-table-column>
            <el-table-column prop="operationUsername" label="操作人"></el-table-column>
            <el-table-column prop="deliveryUsername" label="配送人"></el-table-column>
          </el-table>
        </el-row>
      </div>
      <consign-detail v-if="consignVisible" ref="consignDialog"></consign-detail>
      <receipt-detail v-if="receiptVisible" ref="receiptDialog"></receipt-detail>
  </div>
</template>

<script>
  import { getInTransit } from '@/api/eims/optician/glassesinfo'
  import { mapGetters } from "vuex";

  import ConsignDetail from '@/views/eims/optician/components/ConsignDetail'
  import ReceiptDetail from '@/views/eims/optician/components/ConsignReceiptDetail'


export default {
  data() {
    return {
      dataForm: {
        key: ""
      },
      billId: '',
      consigns: [],
      dataList: [],
      searchShow: true,
      pageIndex: 1,
      pageSize: 100,
      totalPage: 0,
      dataListLoading: false,
      addOrUpdateVisible: false,
      consignVisible: false,
      receiptVisible: false
    };
  },
  components: {
    ConsignDetail,
    ReceiptDetail
  },
  methods: {
    // 初始化数据
    init(id) {
      this.billId = id
      this.$nextTick(() => {
        this.getDataList()
      })
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      getInTransit(this.billId).then(response => {
        if(response.data.code == '0'){
          this.dataForm = response.data.data
          this.dataList = response.data.data.infos
          this.consigns = response.data.data.consigns
        }else{
          this.$message.error(response.data.msg)
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    statusFormatter(row, column, cellValue, index) {
      switch (cellValue) {
        case 1:
          return '已完成'
          break
        case 0:
          return '未完成'
          break
      }
    },
    indexMethod(index){
      return index + 1
    },
    checkDetail(number) {
      this.consignVisible = true
      this.$nextTick(() => {
        this.$refs.consignDialog.init(number)
      })
    },
    checkReceiptDetail(number){
      this.receiptVisible = true
      this.$nextTick(() => {
        this.$refs.receiptDialog.init(number)
      })
    }
  }
};
</script>
